@import url("fonts.css");

/* ==========================================================================
   Theme / CSS Variables
   ========================================================================== */
:root {
	/* Primärfarbe (z. B. Headlines, Buttons, Akzente) */
	--color-primary: #2b3f58;

	/* Sekundärfarbe (aktuell nicht überall genutzt, Reserve für Akzente) */
	--color-secondary: #007827;

	/* Seitenhintergrund */
	--page-bg: #efefef;

	/* Footer-Hintergrund */
	--footer-bg: #dfdfdf;
}

/* ==========================================================================
   Reset & Base
   - Vereinheitlicht Box-Modell
   - Entfernt Default-Abstände
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	/* 10px Basis für rem-Rechnung (1rem = 10px) */
	font-size: 10px;
}

body {
	/* Grundlayout */
	min-height: 100vh;

	/* Typografie */
	font-family: "Noto Sans Display", sans-serif;
	font-size: 1.6rem;
	line-height: 1.5;

	/* Hintergrund */
	background-color: var(--page-bg);
}

/* ==========================================================================
   Layout Wrapper
   ========================================================================== */
#wrapper {
	/* Zentrierter Seitencontainer */
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;

	/* Mobile Innenabstand */
	padding: 0 1.5rem;

	/* Flex-Layout für Footer am Seitenende */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* ==========================================================================
   Header (mobile-first)
   ========================================================================== */
#header {
	/* Flexible Höhe: Inhalte dürfen wachsen */
	padding: 1.5rem 0;
}

#header .inside {
	/* Mobile: Elemente untereinander */
	display: flex;
	flex-direction: column;
	gap: 1.5rem;

	/* Links ausrichten */
	align-items: flex-start;
}

/* Logo: responsiv begrenzen */
#logo {
	width: min(220px, 100%);
}

/* Titeltext-Link */
#titeltext a {
	/* Typografie */
	font-size: 2.6rem;
	font-weight: 600;
	color: var(--color-primary);

	/* Mobile: kein unnötiges Padding */
	padding: 0;
}

/* ==========================================================================
   Main Container
   ========================================================================== */
#container {
	/* Füllt den verfügbaren Platz zwischen Header und Footer */
	flex: 1;

	/* Vertikaler Abstand */
	padding: 1.5rem 0;
}

/* ==========================================================================
   Footer (mobile-first)
   ========================================================================== */
#footer {
	/* Grundlayout */
	padding: 1.5rem 0;
	background-color: var(--footer-bg);

	/* Optik */
	border-radius: 0.5rem 0.5rem 0 0;
}

#footer .inside {
	/* Mobile: stapeln */
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
	/* Vertikale Rhythmik */
	margin: 2rem 0 3rem;

	/* Optik */
	color: var(--color-primary);

	/* Fix: korrekte Eigenschaft, kein Tippfehler */
	font-weight: 500;
}

h1 {
	/* Hauptüberschrift */
	font-size: 2.8rem;
}

h2 {
	/* Sekundärüberschrift */
	font-size: 2.5rem;
}

p {
	/* Absatzabstand */
	margin: 1rem 0;

	/* Grundschriftgröße (leicht größer als body für Lesbarkeit) */
	font-size: 1.7rem;
}

a {
	/* Linktypografie */
	font-size: 1.7rem;

	/* Standard: keine Unterstreichung */
	text-decoration: none;

	/* Standard-Linkfarbe */
	color: #000000;
}

/* Optional: besseres Hover-Feedback für Content-Links */
#container a:hover {
	/* dezente Hervorhebung */
	text-decoration: none;
}

/* ==========================================================================
   LISTEN-STYLING im Hauptcontent (Quadrat)
   - Gilt bewusst nur im Content-Bereich (#container)
   - Navigationen werden explizit ausgenommen
   ========================================================================== */

/*
 * Standard-Listen im Content: Quadrat-Marker, saubere Einzüge, lesbarer Abstand.
 * Wichtig: Nur "echte Inhalte", nicht Navigationen.
 */
#container ul:not(nav ul):not(.mod_navigation ul):not(.mod_customnav ul):not(#footer ul),
#container ol:not(nav ol):not(.mod_navigation ol):not(.mod_customnav ol):not(#footer ol) {
	/* Sauberer Einzug */
	padding-left: 2.2rem;

	/* Vertikaler Abstand um Listen */
	margin: 1.2rem 0 1.8rem;
}

/* Unsortierte Listen im Content: Quadrat */
#container ul:not(nav ul):not(.mod_navigation ul):not(.mod_customnav ul):not(#footer ul) {
	list-style-type: square; /* gewünschter Quadrat-Marker */
	list-style-position: outside; /* Marker außerhalb für klare Linie */
}

/* Sortierte Listen im Content: Standard Dezimal, sauber belassen */
#container ol:not(nav ol):not(.mod_navigation ol):not(.mod_customnav ol):not(#footer ol) {
	list-style-type: decimal; /* bewusst: keine Quadrate für nummerierte Listen */
	list-style-position: outside;
}

/* Abstand zwischen List-Items */
#container li {
	margin: 0.6rem 0;
}

/* Nested Lists: etwas weniger Abstand, klarer Einzug */
#container li > ul,
#container li > ol {
	margin: 0.8rem 0;
}

/* ==========================================================================
   Content Modules
   ========================================================================== */
#kaesten-startseite {
	/* Mobile: 1 Spalte */
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.titel-boxen {
	/* Box-Layout */
	width: 100%;
	padding: 2rem;

	/* Optik */
	background-color: var(--color-primary);
	color: #fff;
	border-radius: 0.5rem;
}

.titel-boxen h2 {
	/* Box-Überschrift */
	color: #fff;
	text-align: center;
	font-weight: 400;
	text-transform: uppercase;
}

/* Angebot-Block innerhalb der Box */
.titel-boxen .angebot {
	/* leichte Aufhellung der Primärfarbe */
	border-radius: 0.5rem;
	padding: 1rem;
	font-weight: 500;
	font-size: 2rem;
	color: var(--color-primary);
	background-color: var(--page-bg);
}

/* Content-Bilder runden */
#container .content-image img {
	border-radius: 0.5rem;
}

/* Bilder-/Titel-Reihe */
.titel-bilder {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
}

/* Button: Mobile full width, Desktop begrenzt */
.button-angebot {
	display: block;

	/* Farben */
	background-color: var(--color-primary);
	color: #fff;

	/* Optik */
	border-radius: 0.5rem;

	/* Typografie */
	font-size: 2rem;
	font-weight: 400;

	/* Layout */
	padding: 1rem 2rem;
	width: 100%;
	max-width: 300px;
	margin: 3rem auto;
	text-align: center;
}

/* Button Hover */
.button-angebot:hover {
	/* leichte Aufhellung als Hover-Feedback */
	background-color: color-mix(in srgb, var(--color-primary) 85%, white);
	text-decoration: none;
}

/* ==========================================================================
   Footer Navigation
   - Keine List-Marker in Navigationen
   ========================================================================== */
#footer ul {
	/* Navigationen ohne Marker */
	list-style: none;

	/* Layout */
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;

	/* Typografie */
	font-size: 1.7rem;

	/* Mobile: eher zentriert */
	justify-content: center;

	/* Reset */
	padding: 0;
	margin: 0;
}

/* Hover im Footer */
#footer ul a:hover {
	color: #aaa;
}

/* Active Markierung: strong nicht zusätzlich fetten */
.active strong {
	font-weight: normal;
}

/* Copyright / Copytext */
.copy {
	font-size: 1.2rem;
	text-align: center;
}

/* ==========================================================================
   Media Query >= 1000px (Desktop / Tablet)
   ========================================================================== */
@media (min-width: 1000px) {
	#wrapper {
		/* Desktop: Außenkanten bündig */
		padding: 0;
	}

	#header {
		/* Desktop: definierte Headerhöhe ok */
		padding: 1.5rem;
		height: 150px;
	}

	#header .inside {
		/* Desktop: nebeneinander */
		flex-direction: row;
		align-items: center;
	}

	#logo {
		/* Desktop: größere Logobreite */
		width: 300px;
	}

	#titeltext {
		/* Desktop: Titelbereich flexibler */
		flex: 1;

		/* Layout */
		padding: 4rem;

		/* Hinweis: font-size auf #titeltext wirkt nicht auf Link, wenn Link eigene Größe hat */
		font-size: 3rem;
	}

	#container {
		/* Konsistenter Content-Abstand */
		padding: 1.5rem 0;
	}

	#footer {
		/* Desktop: feste Footerhöhe */
		height: 150px;
		padding: 1.5rem;
	}

	#footer .inside {
		/* Desktop: nebeneinander */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	#footer ul {
		/* Desktop: linksbündig mit größerem Abstand */
		justify-content: flex-start;
		gap: 5rem;
	}

	#kaesten-startseite {
		/* Desktop: Boxen nebeneinander */
		flex-direction: row;
		justify-content: space-between;
		gap: 4rem;
		margin-top: 4rem;
	}

	.titel-boxen {
		/* Desktop: Mindestbreite wieder zulassen */
		min-width: 300px;
		flex: 1;
	}
}